<!--
 * @@file        index.html
 * @@brief       
 * @@version     V1.0
 * @@author      Jsir2022 (jsir2022@outlook.com)
 * @@date        2023-10-12 20:46:40
 * @LastEditors  Jsir2022
 * @LastEditTime 2023-10-23 00:57:39
 * history		版本	日期		作者		说明
 * 				V1.0	202x-x-x	Jsir2022	正式发布
 * Copyright (c) 2023 by Jsir2022, All Rights Reserved. 
 * @verbatim
 * ==============================================================================
 * 
 * ==============================================================================
 * @endverbatim
-->

<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
    <title>通信基地首页</title>
    <link rel="shirtcut icon" type="image/x-icon" href="images/htmlLogo.png" />
    <link rel="stylesheet" type="text/css" href="css/universal.css" />
    <link rel="stylesheet" type="text/css" href="css/card.css" />
    <link rel="stylesheet" type="text/css" href="css/time.css" />
    <style>
      body {
        overflow-y: hidden;
      }
      .scroller {
        height: 100vh;
        width: 100%;
        overflow-y: scroll;
        scroll-snap-type: y mandatory;
      }
      .scroller section {
        scroll-snap-align: start;
      }
      h1 {
        color: white;
        font-size: 66px;
        font-weight: 60;
        line-height: 0.6;
      }
      #Content {
        position: absolute;
        top: 40%;
        left: 11%;
        background-color: rgb(128, 128, 128, 0.1);
        border-radius: 16%;
      }
      #IndexImages {
        background-image: url("images/Index1.jpg");
        background-size: cover;
        background-repeat: no-repeat;
        position: relative;
        width: 100%;
        height: 100vh;
        transition: background-image 1s;
        /* 只有谷歌浏览器支持background-image的transition或animation */
      }
      #NavTop:hover {
        height: 251px;
      }
    </style>
  </head>
  <body>
    <article class="scroller">
      <section>
        <div id="IndexImages">
          <iframe
            src="htmls/navWhite.html"
            width="100%"
            height="69px"
            frameborder="0"
            scrolling="no"
            id="NavTop"
            style="position: fixed; top: 0; z-index: 999"
          ></iframe>
          <div id="Content">
            <h1 id="text1">自强不息</h1>
            <h1 id="text2">志在千里</h1>
          </div>
        </div>
      </section>

      <section style="height: 210vh">
        <h1 id="timehead">通信基地发展历程</h1>
        <ul class="timeline">
          <li>
            <span class="timeline-date">2008</span>
            <div class="timeline-content">
              <h3>通信基地成立</h3>
              <p>成立于2008年，第一批加入双创学院的基地，主要研究射频方面。</p>
            </div>
          </li>
          <li>
            <span class="timeline-date">2011</span>
            <div class="timeline-content">
              <h3>发展迅猛</h3>
              <p>
                作为当时全国五所独立院校之一，荣获全国大学生电子设计竞赛全国一等奖，也是广西区独立学院首次获得该比赛的国一。
              </p>
            </div>
          </li>
          <li>
            <span class="timeline-date">2021</span>
            <div class="timeline-content">
              <h3>重铸荣光</h3>
              <p>
                伍冠宇、雷寰宇、梁梅三人取得电赛国二的好成绩，标志着通信基地转向嵌入式开发。
              </p>
            </div>
          </li>
          <li>
            <span class="timeline-date">2022</span>
            <div class="timeline-content">
              <h3>技术创新</h3>
              <p>
                郑帅、梁梅、梁杰锋三人荣获全国大学生智能汽车竞赛信标组全国一等奖，参加该赛事第二年就取得好成绩
              </p>
            </div>
          </li>
          <li>
            <span class="timeline-date">2023</span>
            <div class="timeline-content">
              <h3>稳定发挥</h3>
              <p>
                梁杰锋、张嘉铭、张业浩三人荣获电赛国二，通信基地连续三年取得重点比赛的国家级奖项
              </p>
            </div>
          </li>
          <li>
            <span class="timeline-date">now</span>
            <div class="timeline-content">
              <h3>未来待续...</h3>
              <p>
                敬请期待
              </p>
            </div>
          </li>
        </ul>
      </section>

      <section>
        <div class="container" id="container">
          <div class="row">
            <div class="col">
              <div class="card">
                <h2>基地简介</h2>
                <p>
                  通信基地全称“大学生通信技术创新实践基地”，是一个面向全校高升本招生的创新基地，其主要功能定位为：招收学有余力的学生并开展信息技术技能的培训、科技创新创业、组织和指导我校学生参加以通信电子信息类为主的重大学科竞赛，组织相关科技创新实践活动，提高学生的创新精神和实践能力，为培养创新型人才提供支持和保障。
                </p>
                <img src="images/logoSchool.jpg" alt="信科logo" />
              </div>
            </div>
            <div class="col">
              <div class="card">
                <h2>竞赛成果</h2>
                <p>
                  基地积极组织学生参加全国大学生工程实践与创新能力大赛、全国大学生电子设计竞赛、全国大学生智能汽车竞赛等一系列通信电子类赛事。连续三年稳定发挥，分别在2021年荣获电赛国二、2022年智能车国一、2023年电赛国二。
                </p>
                <img src="images/price.jpg" alt="国一奖状" />
              </div>
            </div>
            <div class="col">
              <div class="card">
                <h2>技术培训</h2>
                <p>
                  通信基地位于E223，下设的智能车训练馆位于E216，加入的学生主要研究嵌入式方向。基地在每年九月起定期举办通信技术相关的培训课程，包括PCB绘制与焊接、C语言基础、51单片机实用教程等，帮助新生提高专业技能和创新能力。对已加入的同学进行期末考核，考核从你大一到大三一直进行，以确保能够掌握相关的技能和知识。欢迎在通信、电子、计算机上有一定想法或基础能力的你加入我们，今后的基地培训和国家级竞赛是提升自我能力的优选！
                </p>
                <img src="images/training.jpg" alt="培训实拍" />
              </div>
            </div>
          </div>
          <div class="row">
            <div class="col">
              <div class="card">
                <h2>基地优势</h2>
                <p>
                  在信科你想毕业是需要两个创新创业学分的，学分够多还能抵消掉一些非必修课，减少学费的同时还能投入更多的时间用来学习。2022年从基地毕业到深圳工作的伍学长月薪15k、黄学长12k；2023年从基地毕业到深圳工作的刘学长月薪15k、华学长14k。比不搞比赛和项目的同学薪资高很多。在今后就业形势越来越严峻，或许需要付出更多才能找到满意的工作了，对你来说好不容易结束掉高考，还不算晚，现在请为你的大学四年投资吧！
                </p>
              </div>
            </div>
            <div class="col">
              <div class="card">
                <h2>加入我们</h2>
                <p>
                  常规：等新生的你们军训完我们会发布宣讲会信息，如果对我们感兴趣加群填写电子报名表，并在一星期后进行简单的面试。之后我们会有培训+考核，在过程中坚持下来的人就能成为我们的一员。
                </p>
                <p>
                  直达：什么！你居然是有着C语言基础、绘制PCB的经验、懂得51单片机或32单片机、或者搞过如无人机、航模、机器人等科技爱好的大佬！那还等什么速速私聊群主一起吹水吧。
                </p>
              </div>
            </div>
          </div>
        </div>
      </section>

      <section>
        <iframe
          src="htmls/footer.html"
          width="100%"
          height="130px"
          frameborder="0"
          scrolling="no"
        ></iframe>
      </section>
    </article>
  </body>
</html>
<script>
  // 首先获取相关DOM
  var img = document.getElementById("IndexImages");
  var customNav = document.getElementById("NavTop");
  // 构造图片和文字数组
  var arr_img = [
    "images/Index1.jpg",
    "images/Index2.jpg",
    "images/Index3.jpg",
    "images/Index4.jpg",
  ];
  var arr_text1 = ["自强不息", "力行求实", "创新进取", "追求卓越"];
  var arr_text2 = ["志在千里", "行稳致远", "开拓未来", "走向成功"];
  // 图片轮播
  var currentIndex = 1;
  //flag用于记录iframe的状态，避免多次刷新
  var flag = 1;
  function slide() {
    img.style.backgroundImage = "url('" + arr_img[currentIndex] + " ')";

    text1.innerText = arr_text1[currentIndex];
    text2.innerText = arr_text2[currentIndex];
    currentIndex = ++currentIndex % 4;

    // console.log(-img.getBoundingClientRect().top > 500);
    if (-img.getBoundingClientRect().top > 500) {
      if (flag == 1) {
        customNav.src = "htmls/navBlack.html";
      }
      flag = 0;
    } else {
      if (flag == 0) {
        customNav.src = "htmls/navWhite.html";
      }
      flag = 1;
    }
  }

  // 使用setInterval完成轮播
  setInterval(slide, 3000);
</script>
